<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>screen</title>
  <!-- 引入swiper -->
  <link rel="stylesheet" href="js/swiper-2.7.6/swiper.min.css">
  <!-- 引入字体图标 -->
  <link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css" />
  <!-- Bootstrap -->
  <link href="js/bootstrap/bootstrap.min.css" rel="stylesheet">
  <!-- 引入全局配置 -->
  <link rel="stylesheet" type="text/css" href="css/start.css">

  <!--引入公共样式-->
  <link rel="stylesheet" type="text/css" href="css/common.css" />
  <link rel="stylesheet" type="text/css" href="css/homepage.css">

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="js/common/jquery-1.12.2.js"></script>
  <script src="js/common/baseUrl.js"></script>
  <!-- 引入swiper插件 -->
  <script type="text/javascript" src="js/swiper-2.7.6/swiper.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="js/bootstrap/bootstrap.min.js"></script>
  <!-- 让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <script type="text/javascript" src="js/common/respond.min.js"></script>
  <script type="text/javascript" src="js/common/html5.min.js"></script>
  <script type="text/javascript" src="js/common/common.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
  <script src="js/artTemplate/template.js"></script>
  <script src="http://res.hsxt.cn/pub/data/js/city.js" type="text/javascript"></script>
  <script src="http://res.hsxt.cn/pub/data/js/county.js" type="text/javascript"></script>
  <script src="http://res.hsxt.cn/pub/data/js/businessCircle.js" type="text/javascript"></script>
</head>

<body class="screen">
  <!-- 头部开始 -->
  <div id="header">
    <div class="top">
      <div class="top-left">
        <i class="fa fa-map-marker "></i>
        <a href="javascript:void(0)" class="one">广州</a>
        <a href="javascript:void(0)" class="two">切换城市</a>
      </div>
      <div class="top-right">
        <a class="one">
          <i class="fa fa-user"></i> 朱莉
        </a>
        <a href="javascript:void(0)">退出</a>
        <a href="javascript:void(0)">帮助中心</a>
        <a href="javascript:void(0)">网站导航</a>
        <a href="javascript:void(0)">手机APP</a>
      </div>

    </div>
    <div class="searchBox">
      <div class="search">
        <div class="search-left">
          <h3>互生 <small>商务服务</small></h3>
        </div>
        <div class="search-right">
          <div class="one">
            <input type="text" name="search" id="search" value="输入商家名称、分类或地区" placeholder="输入商家名称、分类或地区" />
            <a href="javascript:void(0)">
              <i class="fa fa-search"></i>
            </a>
          </div>

          <div class="two">
            <a href="#">运动健身</a>
            <a href="#">瑜伽</a>
            <a href="#">羽毛球</a>
            <a href="#">CS</a>
            <a href="#">农家乐</a>
            <a href="#">私人影院</a>
          </div>
        </div>

      </div>

    </div>

  </div>
  <!-- 头部结束 -->

  <!-- template开始 -->
  <div id="content"></div>
  <script id="test" type="text/html">
    <div>
        <div class="container">
            <div class="titleNav">
                首页/商务服务/IT网站
            </div>
            <!-- 筛选条件框 -->
            <div class="classify">
                <div class="titleAllBox">
                    <div class="title">
                        分类
                    </div>
                    <div class="titleAll">
                        <ul class="titleAllUl">
                            <li class="screenActive">全部</li>
                            {{each isSort value}}
                              <li>{{value.categoryName}}</li>
                            {{/each}}
                        </ul>
                    </div>
                </div>
                <div class="originBox">
                    <div class="title">
                        区域
                    </div>
                    <div class="titleAll">
                        <ul class="titleAllUl2">
                            <li class="screenActive">全部</li>
                            {{each isCounty value}}
                              <li onclick="getCounty({{value.areaCode}})">{{value.areaName}}</li>
                            {{/each}}
                        </ul>
                        <ul class="titleAllUlDetail">
                            <li class="screenActive">全部</li>
                            {{each isCircle value}}
                              <li>{{value.locationName}}</li>
                            {{/each}}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </script>

  <script>
    // 获取城市编码
    var city = "410100";
    var parentCode = "410102";
    var countyObj = "";
    var buscircleObj = "";
    // 获取县/区
    function getPubliCounty() {
      countyObj = $.grep(gy_public_county, function (value) {
        //过滤筛选条件
        return value.parentCode == city;
      });
    };
    getPubliCounty();
    console.log("这是县/区分类");
    console.log(countyObj);

    function getPubliCircle() {
      buscircleObj = $.grep(gy_public_businessCircle, function (value) {
        //过滤筛选条件
        return value.areaCode == parentCode;
      });
    };
    getPubliCircle();
    console.log("这是商圈分类");
    console.log(buscircleObj);

    $.ajax({
      type: "get",
      url: baseUrl + "/hsent-xxyl-user/category/listTSystemCategory",
      dataType: "json",
      data: {

      },
      success: function (res) {
        // console.log("这是title分类");
        // console.log(res);
        allSort = res.data;
        var data = {
          isSort: allSort,
          isCounty: countyObj,
          isCircle: buscircleObj
        };
        var html = template('test', data);
        document.getElementById('content').innerHTML = html;
      },
      error: function (msg) {

      }
    })

    function getCounty(showCounty) {
      // console.log(showCounty);
      var parentCode = showCounty;
      console.log(parentCode);
      getPubliCircle();
      console.log("这是商圈分类");
      console.log(buscircleObj);
      var data = {
        isCircle: buscircleObj
      };
      var html = template('test', data);
      document.getElementById('content').innerHTML = html;
    }
  </script>

  <div id="content2"></div>
  <script id="test2" type="text/html">
    <div>
        <div class="container">
            <!--列表信息内容 -->
            <div class="screenList">
                <div class="title">
                    <select class="cp" name="">
                      <option value="">商家服务</option>
                      <option value="">支持上门服务</option>
                      <option value="">支持退款</option>
                      <option value="">支持消费抵扣券</option>
                    </select>
                    <select class="sortTwo cp" name="">
                      <option value="">智能排序</option>
                      <option value="1">离我最近</option>
                      <option value="2">消费积分数</option>
                    </select>
                    <select class="sortThree cp" name="">
                      <option value="">评价</option>
                      <option value="3">好评优先</option>
                    </select>
                    <select class="sortFour cp" name="">
                      <option value="">价格</option>
                      <option value="5">价格从高到低</option>
                      <option value="4">价格从低到高</option>
                    </select>
                    <div class="number">
                      <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
                      1/10
                      <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
                    </div>
                  </div>
                {{each isShop value}}
                <div class="content">
                    <div class="pic">
                        <img src="{{value.shopPictures}}" alt="">
                    </div>
                    <div class="infoDivC">
                        <div class="infoDiv">
                            <div class="info">
                                <div class="nameDiv">
                                    <div class="name">
                                        {{value.shopName}}
                                    </div>
                                    <div class="phone">
                                        (00 253 568 47)
                                    </div>
                                </div>
                                <div class="rate">
                                    {{if value.shopEvaluateValue>0&&value.shopEvaluateValue<=1.4}}
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#dddddd"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#dddddd"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#dddddd"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#dddddd"></span>
                                      {{else if value.shopEvaluateValue>1.4&&value.shopEvaluateValue<=2.4}}
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#dddddd"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#dddddd"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#dddddd"></span>
                                      {{else if value.shopEvaluateValue>2.4&&value.shopEvaluateValue<=3.4}}
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#dddddd"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#dddddd"></span>
                                      {{else if value.shopEvaluateValue>3.4&&value.shopEvaluateValue<=4.4}}
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true" style="color:#dddddd"></span>
                                      {{else if value.shopEvaluateValue>4.4}}
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                      <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                    {{/if}}
                                    <span style="	color: #b6b6b6;margin-left:8px;">{{value.shopEvaluateValue}}分</span>
                                    <span style="	color: #b6b6b6;margin-left:20px;">{{value.locationName}}</span>
                                </div>
                                <div class="tag">
                                    {{each value.serviceNameList nameList}}
                                      <span class="label label-info">{{nameList}}</span>
                                    {{/each}}
                                </div>
                                <div class="adress">
                                    <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                                    {{value.shopAddress}}
                                </div>
                            </div>
                            <div class="infoRight">
                                <div class="login">
                                    <span class=" glyphicon glyphicon-earphone" aria-hidden="true"
                                        style="margin-right:10px;"></span>
                                    登录可看
                                </div>
                                <div class="comm">
                                    <span class=" glyphicon glyphicon-envelope" aria-hidden="true"
                                        style="margin-right:10px;"></span>
                                    在线咨询
                                </div>
                            </div>
                        </div>
                        {{each value.goodsBasicVoList goodsBasic}}
                        <div class="goods-box">
                            <div class="goodsList">
                              <div class="list-one">
                                  <span class="bigbag">{{goodsBasic.goodsName}}</span>
                                  {{if goodsBasic.serviceType==1}}
                                    <span class="updoor">上门</span>
                                  {{/if}}
                              </div>
                              <div class="list-two">
                                  <img src="img/yhq2.png" alt="">
                                  <span class="jinbi">{{goodsBasic.hsprice}}</span>
                                  <img src="img/yhq3.png" alt="">
                                  <span class="jifen">{{goodsBasic.perPoint}}</span>
                              </div>
                              <div class="list-three">
                                  <img src="img/yhq1.png" alt="">
                                  <span class="isyhq"></span>
                                  <span class="isyhq">每满{{goodsBasic.hscouponUseRule.split(':')[0]}}使用10元抵扣券{{goodsBasic.hscouponUseRule.split(':')[1]}}张</span>
                              </div>
                            </div>
                            {{if goodsBasic.serviceType==3}}
                              <div class="saletype">已预约{{goodsBasic.totalApplyCount}}</div>
                              {{else}}
                              <div class="saletype">已售{{goodsBasic.totalApplyCount}}</div>
                            {{/if}}
                        </div>
                        {{/each}}
                        <!-- <div class="infoBot">
                            <img src="img/good.jpg" alt="">
                            商标担保注册不成功[尚标]退款
                        </div>
                        <div class="infoBot">
                            <img src="img/good.jpg" alt="">
                            商标担保注册不成功[尚标]退款
                        </div> -->
                    </div>
                </div>
                {{/each}}
                <div class="fenye">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
  </script>

  <script>
    var condition = {
      pid: 0,  //(1)pid必传
      pageNum: 1,  //(2)页数
      pageSize: 2,  //(3)每页条数
      cityName: "",  //(4)城市名称
      keyWords: "",  //(5)关键字查询
      categoryName: "",  //(6)类目名称查询
      serviceType: "",  //(7)根据服务条件查询
      locationState: "",  //(8)距离查询
      locationName: "",  //(9)商圈名称
      coordinate: "",  //(10)用户所在位置经纬度
      distance: "",  //(11)用户需要查询的距离范围
      orderState: "",  //(12)排序方式
    }

    $.ajax({
      type: "get",
      url: baseUrl + "/hsent-xxyl-user/solr/selectShopByKeyWords",
      dataType: "json",
      data: condition,

      success: function (res) {
        console.log("这是shop分类");
        console.log(res);
        allShop = res.data;

        var data = {
          isShop: allShop
        };
        var html = template('test2', data);
        document.getElementById('content2').innerHTML = html;
      },
      error: function (msg) {

      }
    });

    // 智能排序
    function selectChange(num, type) {
      // num.css("background-color", "#FFFFCC");
      console.log(num);
      if (type == 2) {
        condition.orderState = num;
      } else if (type == 3) {
        condition.orderState = num;
      } else {
        condition.orderState = num;
      }
      $.ajax({
        type: "get",
        url: baseUrl + "/hsent-xxyl-user/solr/selectShopByKeyWords",
        dataType: "json",
        data: condition,

        success: function (res) {
          console.log("这是shop分类");
          console.log(res);
          allShop = res.data;

          var data = {
            isShop: allShop
          };
          var html = template('test2', data);
          document.getElementById('content2').innerHTML = html;
        },
        error: function (msg) {

        }
      });

    }
    // 智能排序
    $("#content2").on('change', '.sortTwo', function () {
      // console.log($(this).val())
      selectChange($(this).val(), 2)
    })
    // 评价
    $("#content2").on('change', '.sortThree', function () {
      selectChange($(this).val(), 3)
    })
    // 价格
    $("#content2").on('change', '.sortFour', function () {
      selectChange($(this).val(), 4)
    })
  </script>
  <!-- template结束 -->

  <!--**********底部开始**********-->
  <div class="foot" id="foot">
    <p>
      <strong>客服热线： </strong>
      <a href="javascript:void(0)">
        0755-83344111
      </a>
      <span class="foot-adition">2013-2018 </span>
      <span>
        深圳市互生电子商务有限公司
      </span>
      <span>
        粤ICP备案号14100052号
      </span>
    </p>
  </div>
  <!--**********底部结束**********-->

  <script>
    // swiper
    var mySwiper = new Swiper('.swiper-container', {
      swipeToNext: true,
      pagination: '.pagination',
      paginationClickable: true,
      autoplay: 5000, //可选选项，自动滑动
      loop: true, //可选选项，开启循环

    })
    $('#prve').click(function () {
      mySwiper.swipePrev();
    })
    $('#next').click(function () {
      mySwiper.swipeNext();
    });
    //筛选页面 筛选条件
    $("#content").on('click', '.titleAllUl li', function () {
      $(".titleAllBox li").removeClass("screenActive");
      $(this).addClass("screenActive");
    })
    $("#content").on('click', '.titleAllUlDetail li', function () {
      $(".titleAllUlDetail li").removeClass("screenActive");
      $(this).addClass("screenActive");
    })
    $("#content").on('click', '.titleAllUl2 li', function () {
      $(".titleAllUl2 li").removeClass("screenActive");
      $(this).addClass("screenActive");
    })

    // console.log(gy_public_city);
            // 获取县/区
    // function getPubliCounty() {
    //     countyObj = $.grep(gy_public_county, function (value) {
            // 过滤筛选条件
    //         return value.parentCode == city;
    //     });
    // }
    // var city = "";
    // var publiCounty = '';
    // var countyObj = {};
    // $(document).ready(function () {
    //     city = '410100';
    //     getPubliCounty();
    //     console.log(countyObj)
    // });
  </script>
</body>

</html>